<template>
	<div class="user">
		<div class="title">
			<span>用户新增</span>
		</div>
		<div class="main">
			<div class="main-right" ref="mainRight">
				<div class="content">
					<el-form ref="addForm" :model="addForm" label-width="88px" size="mini" style="display: flex;flex-wrap: wrap;">
						<el-form-item label="用户名称" prop="isHormonalDrugs">
							<el-input v-model="addForm.username"></el-input>
						</el-form-item>
						<el-form-item label="登录密码" prop="isHormonalDrugs">
							<el-input v-model="addForm.password"></el-input>
						</el-form-item>
						<el-form-item label="角色Id" prop="isHormonalDrugs">
							<el-input v-model="addForm.roleId"></el-input>
						</el-form-item>
						<el-form-item label="邮箱" prop="isHormonalDrugs">
							<el-input v-model="addForm.email"></el-input>
						</el-form-item>
						<el-form-item label="状态" prop="isHormonalDrugs">
							<el-switch
							  v-model="addForm.status"
							  active-color="#13ce66"
							  active-value="1"
							  inactive-value="0"
							  inactive-color="#ff4949">
							</el-switch>
						</el-form-item>
						<el-form-item>
						  <el-button type="primary" @click="submitForm">添加</el-button>
						  <el-button @click="resetForm">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	// selfs / sons
	import Pinyin from "@/external/pinyin.js";
	import { addUser } from "@/api/user.js";
	
	export default {
		components: {
			
		},
		data() {
			return {
				options: [{value: '可用',label: '可用'},{value: '禁用',label: '禁用'}],
				// header查询重置按钮
				headerBtn:[{ title:"查询", icon:"el-icon-Ssearch",type:'primary' },{ title:"重置", icon:"el-icon-refresh" }],
				headerBtnbottomLeft:[{ title:"新增", icon:"el-icon-plus",type:'primary' },{ title:"导入", icon:"el-icon-upload2" }],
				headerBtnbottomRight:[{ title:"导出", icon:"el-icon-download" },{ icon:"el-icon-refresh" },{ icon:"el-icon-s-tools" },{ icon:"el-icon-full-screen" }],
				// 表格行
				tableRows:[
					{ name:"昵称", prop:"nickName", type:"" },{ name:"用户名", prop:"userName", type:"" },
					{ name:"状态", prop:"status", type:"" },{ name:"性别", prop:"sex", type:"" },
					{ name:"所属部门", prop:"bm", nz:"nz" },{ name:"角色", prop:"role", type:"" },{ name:"手机号", prop:"tel", type:"" },
					{ name:"邮箱", prop:"email", nz:"nz" },{ name:"描述", prop:"remake", type:"" },{ name:"创建时间", prop:"createTime", type:"" },
				],
				// 表格data
				tableData:[
					{ nickName:'admin', userName:'张培东',status:'可用',sex:'男', bm: '研发部',remake:'测试九阵软件...',role:'超级管理员',email:'JZadmin',tel:'123456789',createTime:'2025-02-26' },
				],
				// add
				addForm:{
					username:'', 
					status:'',
					roleId:['1','2'], 
					password:'',
					email:'', 
				},
			}
		},
		mounted() {
			//获取动态盒子宽度，实时赋值给右侧 => this.$refs.mainRight.offsetWidth;
			this.$nextTick(()=>{
				this.tableWidth = 1108
			})
		},
		watch: {
		  filterText(val) {
			this.$refs.tree.filter(val);
		  }
		},
		methods:{
			async submitForm(){
				// addUser
				//触发验证表单
				  this.$refs.addForm.validate(async(valid) => {
				    if(valid){
				    //验证通过
				    // console.log('submit');
					let rs = await addUser(this.addForm)
					// console.log(rs);
					if (rs.code === 200){
						this.$message({
							message:msg,
						type:"success"
					});
					//跳转
					this.$router.push("/user/index");
				    }else{
				      //验证失败
				      console.log('失败');
				    }
				  }
				  });
			},
			/*
				about tree
			*/
			handleNodeClick(data,e) {
				this.CatalogueName = data.title
				this.iconComes = 'el-icon-' + this.makePy(data.label)
				console.log(this.iconComes);
				// this.loadData();
			},
			// 过滤器
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			// 新增、导入等步骤
			operateClick(i){
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑 ==> 新增
						this.addModelDialogVisible = true;
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
				}
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
				  .then(_ => {
					this.formdisabled = true;
					done();
				  })
				  .catch(_ => {
				  });
			},
			// 步骤
			handClick(i) {
				// i event
				switch (i) {
					case 0:
						// 处理索引0的逻辑
						if(this.searchValue == ''){
							this.$message.error('关键字不能为空！');
						}else{
							this.loading = true;
							setTimeout(() => {
								this.$confirm('敬请期待')
								.then(_ => {})
								.catch(_ => {});
								this.loading = false;		
							}, 1500)
						}
						break;
					case 1:
						// 处理索引1的逻辑
						this.$confirm('敬请期待')
							.then(_ => {})
							.catch(_ => {});
						break;
				}
			},
			// col 里面包含了表头字段和名称，list 是表格数据
			columnWidth(col, list) {
			  let prop = col.prop,lab = col.lab;
			  let width = 80; // 设定一个最小值
			  let maxlenStr = ""; // 最长字符串
			  for (let info of list) {
				if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
			  }
			  width = Math.max(width, len(lab), len(maxlenStr));
			  // 表格自带的内边距(20px) 自调
			  return width + 22; // 这里加了 12px
			  function len(str) {
				// 实际分配长度可根据需要自行调整
				let length = 8;
				for (const char of str + "") {
				  // 英文小写字符 8px
				  if ("a" <= char && char <= "z") length += 8;
				  // 英文大写字符 8px
				  else if ("A" <= char && char <= "Z") length += 8;
				  // 中文字符 28px
				  else if (char >= "\u4e00" && char <= "\u9fa5") length += 12;
				  // 其他 8px
				  else length += 12;
				}
				return length;
			  }
			},
			// db events
			handledbRow(row, column, event){
				console.log(row);
			},
			//重置
			resetForm(){
				this.$refs.addForm.resetFields();
			},
		},
	}
</script>

<style lang="less" scoped>
	// 穿透
	/deep/ .el-dialog__header{
		padding: 12px;
		background-color: #007bb0;
	}
	/deep/ .el-dialog__title{
		font-size: 12px;
		color: #fff;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close{
		color: #fff;
	}
	.user{
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding: 4px;
		.title{
			height: 40px;
			line-height: 40px;
			span{
				font-weight: 300;
				margin-left: 12px;
			}
		}
		.main{
			width: 100%;
			
			margin-top: 8px;
			display: flex;
			.main-left{
				flex: 1;
				// background-color: salmon;
				.tree{
					margin-top: 8px;
				}
				  /* 树形结构节点添加连线 */
				/deep/  .tree .el-tree-node {
				    position: relative;
				    // padding-left: 16px;
				  }
				
				/deep/  .tree .el-tree-node :last-child:before {
				    height: 38px;
				  }
				
				/deep/  .tree .el-tree > .el-tree-node:before {
				    border-left: none;
				  }
				  .tree-container .el-tree > .el-tree-node:after {
				    border-top: none;
				  }
				
				/deep/  .tree .el-tree-node__children .el-tree-node:before {
				    content: '';
				    left: 12px;
				    position: absolute;
				    right: auto;
				    border-width: 1px;
				  }
				/deep/  .tree .el-tree-node__children {
					padding-left: 0px;
				  }
				/deep/  .tree .el-tree-node:after {
				    content: '';
				    left: 12px;
				    position: absolute;
				    right: auto;
				    border-width: 1px;
				  }
				/deep/  .tree .el-tree-node__expand-icon.is-leaf {
				    display: none;
				  }
				
				 /deep/ .tree .el-tree-node:before {
				    border-left: 1px dashed #dddddd;
				    bottom: 0px;
				    height: 100%;
				    top: -26px;
				    width: 1px;
				  }
				
				/deep/  .tree .el-tree-node:after {
				    border-top: 1px dashed #dddddd;
				    height: 20px;
				    top: 12px;
				    width: 24px;
				  }
			}
			.main-right{
				flex: 6;
				margin-left: 12px;
				
				.searchValue{
					display: flex;
					
					/deep/ .el-input{
						
						width: 388px;
					}
					/deep/ .el-select{
						margin-left: 8px;
					}
					/deep/ .el-button{
						margin-left: 8px;
					}
				}
				.btnBottom{
					display: flex;
					justify-content: space-between;
					margin-top: 18px;
				}
				.content{
					width: 488px;
					display: flex;
					justify-content: space-between;
					padding: 12px;
					border: 1px solid #dddddd;
					border-radius: 4px;
				}
			}
		}
	}
</style>